<template>
	<view class="page-container">
		<!-- 加载状态显示 -->
		<view v-if="isLoading" class="loading-container">
			<view class="loading-spinner"></view>
			<text>加载中...</text>
		</view>

		<!-- 错误信息显示 -->
		<view v-if="errorMessage" class="error-container">
			<text class="error-text">{{ errorMessage }}</text>
			<button class="reload-button" @click="fetchItemDetail">重新加载</button>
		</view>

		<!-- 内容区域（数据加载完成后显示） -->
		<view v-else class="content-wrapper">
			<!-- 图片轮播区域 -->
			<view class="swiper-container">
				<swiper class="swiper" :indicator-dots="true" :autoplay="false" :interval="3000" :duration="500">
					<swiper-item v-for="(item, index) in itemImages" :key="index">
						<image class="swiper-image" :src="item.url" mode="aspectFill" @click="previewImage(index)">
						</image>
					</swiper-item>
				</swiper>
			</view>

			<!-- 物品信息区域 -->
			<view class="info-container">
				<view class="title-row">
					<text class="item-title">{{ itemInfo.title }}</text>
					<view class="status-tag" :class="{'claimed': itemInfo.status === 1}">
						<text>{{ itemInfo.status === 1 ? '已认领' : '未认领' }}</text>
					</view>
				</view>

				<view class="meta-row">
					<view class="meta-item">
						<icon type="date" size="16" color="#666"></icon>
						<text class="meta-text">发布时间: {{ itemInfo.createTime }}</text>
					</view>
					<view class="meta-item">
						<icon type="date" size="16" color="#666"></icon>
						<text class="meta-text">拾获时间: {{ itemInfo.foundTime }}</text>
					</view>
				</view>

				<view class="meta-item">
					<icon type="location" size="16" color="#666"></icon>
					<text class="meta-text">拾获地点: {{ itemInfo.foundLocation || '未填写' }}</text>
				</view>

				<view class="tag-container">
					<view class="tag" v-for="(tag, index) in itemInfo.tags" :key="index">
						<text>{{ tag }}</text>
					</view>
				</view>
			</view>

			<!-- 详细描述区域 -->
			<view class="description-container">
				<text class="section-title">物品描述</text>
				<view class="description-content">
					<text>{{ itemInfo.description || '暂无详细描述' }}</text>
				</view>
			</view>

			<!-- 发布者信息 -->
			<view class="user-container">
				<text class="section-title">发布者信息</text>
				<view class="user-info" @click="viewUserProfile(itemInfo.userId)">
					<image class="avatar" :src="publisherInfo.avatar || defaultAvatar" mode="aspectFill"></image>
					<view class="user-details">
						<text class="username">{{ publisherInfo.name || '未知用户' }}</text>
						<view class="user-identity">
							<text class="user-academy">{{ publisherInfo.academy || '未公开学院' }}</text>
							<text class="publisher-tag">发布者</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 互动信息 -->
			<view class="interaction-container">
				<view class="interaction-item">
					<icon type="eye" size="16" color="#666"></icon>
					<text class="interaction-text">浏览 {{ itemInfo.viewCount || 0 }} 次</text>
				</view>
				<view class="interaction-item comment-toggle" @click="toggleComments">
					<icon type="chat" size="16" color="#666"></icon>
					<text class="interaction-text">
						{{ isCommentsExpanded ? '收起评论' : '查看评论' }}
						({{ itemInfo.commentCount }})
					</text>
				</view>
			</view>

			<!-- 评论区（展开/收起） -->
			<view class="comments-container" v-if="isCommentsExpanded">
				<view class="comments-header">
					<text class="section-title">评论区 ({{ itemInfo.commentCount }})</text>
					<view class="comment-form" @submit.prevent="postComment">
						<input class="comment-input" v-model="newComment" placeholder="发表评论..." />
						<button class="comment-submit" type="primary" size="mini" @click="postComment">发布</button>
					</view>
				</view>

				<view class="comment-list">
					<view class="comment-item" v-for="comment in comments"
						:key="comment.id || comment.content + comment.time">
						<view class="comment-user">
							<image class="comment-avatar" :src="comment.commenterAvatar || defaultAvatar"
								mode="aspectFill"></image>
							<view class="comment-user-info">
								<text class="comment-name">{{ comment.commenterName || '匿名用户' }}</text>
								<text class="comment-academy">{{ comment.commenterAcademy || '' }}</text>
							</view>
						</view>
						<view class="comment-content">{{ comment.content }}</view>
						<view class="comment-time">{{ comment.time || '时间未知' }}</view>
					</view>
				</view>
			</view>

			<!-- 安全提示 -->
			<view class="safety-tip">
				<text>温馨提示: 请勿轻易透露个人隐私信息，认领物品时请注意核实身份信息</text>
			</view>

			<!-- 底部操作栏 -->
			<view class="action-bar">
				<view class="action-buttons">
					<view class="secondary-button" @click="addToFavorites">
						<icon type="star" size="20" color="#4A90E2"></icon>
						<text>收藏</text>
					</view>
					<view class="secondary-button" @click="shareItem">
						<icon type="share" size="20" color="#4A90E2"></icon>
						<text>分享</text>
					</view>
					<view class="primary-button" @click="contactOwner">
						<text>联系拾主</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, onMounted, onUnmounted, reactive, computed } from 'vue';

	// 定义默认头像
	const defaultAvatar = 'https://picsum.photos/200/200?random=1000';

	// 直接在组件中实现日期格式化函数
	const formatDate = (dateString : string | Date | undefined) => {
		if (!dateString) return '';

		const date = typeof dateString === 'string' ? new Date(dateString) : dateString;

		// 格式化日期为 YYYY-MM-DD HH:MM 格式
		return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
	};

	// 定义数据状态
	const itemId = ref('');
	const itemImages = ref([]);
	const itemInfo = reactive({
		title: '',
		status: 2, // 2=未认领，1=已认领
		createTime: '',
		foundTime: '',
		foundLocation: '',
		description: '',
		viewCount: 0,
		commentCount: 0, // 由前端根据评论数组计算
		userId: '',
		contactWay: ''
	});

	// 物品发布者信息
	const publisherInfo = reactive({
		avatar: '',
		name: '',
		academy: ''
	});

	// 评论列表（优化了评论数据结构）
	const comments = ref<CommentItem[]>([]);
	const newComment = ref('');
	const isCommentsExpanded = ref(false);
	const isLoading = ref(true);
	const errorMessage = ref('');

	// 用户信息缓存（包含评论发布者）
	const userCache = ref(new Map<string, UserInfo>());

	// 图片预览
	const previewImage = (index : number) => {
		uni.previewImage({
			current: index,
			urls: itemImages.value.map(img => img.url)
		});
	};

	// 切换评论区显示/隐藏
	const toggleComments = () => {
		isCommentsExpanded.value = !isCommentsExpanded.value;
	};

	// 发布评论
	const postComment = async () => {
		if (!newComment.value.trim()) {
			uni.showToast({
				title: '评论内容不能为空',
				icon: 'none'
			});
			return;
		}

		try {
			const userId = uni.getStorageSync('userId');
			if (!userId) {
				uni.showToast({
					title: '请先登录',
					icon: 'none'
				});
				return;
			}

			const res = await request({
				url: `${getApiBaseUrl()}/FoundItem/addComment`,
				method: 'POST',
				data: {
					itemId: itemId.value,
					userId: userId,
					content: newComment.value,
				},
				header: {
					'Content-Type': 'application/json',
				}
			});

			if (res.data.code !== 200) {
				throw new Error(res.data.message || '评论失败');
			}

			uni.showToast({
				title: '评论发布成功',
				icon: 'success'
			});

			// 获取完整的评论数据（包括后端生成的时间和ID）
			const newCommentData = res.data.data || {
				id: Date.now(), // 备用ID，以防后端未返回
				userId: userId,
				content: newComment.value,
				// 使用后端返回的时间，而不是前端生成的时间
				commentTime: res.data.createTime || new Date().toISOString()
			};

			comments.value.unshift(newCommentData);
			newComment.value = '';

			// 前端直接更新评论数量
			itemInfo.commentCount = comments.value.length;

			// 获取新评论的用户信息并添加到评论中
			await fetchCommenterInfoAndUpdateComment(newCommentData);

		} catch (error : any) {
			console.error('评论提交失败', error);
			uni.showToast({
				title: error.message || '网络错误，请稍后再试',
				icon: 'error'
			});
		}
	};

	// 收藏物品
	const addToFavorites = async () => {
		uni.showToast({
			title:'收藏功能正在开发中',
			icon:'error'
		})
		/* try {
			const token = uni.getStorageSync('token');
			if (!token) {
				uni.showToast({
					title: '请先登录',
					icon: 'none'
				});
				return;
			}

			const res = await request({
				url: `${getApiBaseUrl()}/favorites`,
				method: 'POST',
				data: {
					itemId: itemId.value,
					itemType: 'found'
				},
				header: {
					'Content-Type': 'application/json',
					'Authorization': token
				}
			});

			if (res.data.code !== 200) {
				throw new Error(res.data.message || '收藏失败');
			}

			uni.showToast({
				title: '已收藏',
				icon: 'success'
			});
		} catch (error : any) {
			console.error('收藏失败', error);
			uni.showToast({
				title: error.message || '网络错误，请稍后再试',
				icon: 'error'
			});
		} */
	};

	// 分享物品
	const shareItem = () => {
		uni.showToast({
			title:'分享功能正在开发中',
			icon:'error'
		})
		/* uni.share({
			provider: 'weixin',
			type: 0,
			title: itemInfo.title,
			summary: '校园失物招领 - ' + itemInfo.description.substr(0, 30) + '...',
			href: `${window.location.origin}/pages/item/detail?id=${itemId.value}`,
			success: () => {
				uni.showToast({
					title: '分享成功',
					icon: 'success'
				});
			},
			fail: () => {
				uni.showToast({
					title: '分享失败',
					icon: 'error'
				});
			}
		}); */
	};

	// 联系发布者
	const contactOwner = () => {
		if (!itemInfo.contactWay) {
			uni.showToast({
				title: '暂无联系方式',
				icon: 'none'
			});
			return;
		}

		uni.makePhoneCall({
			phoneNumber: itemInfo.contactWay
		});
	};

	// 查看用户资料
	const viewUserProfile = (userId : string) => {
		uni.navigateTo({
			url: `/pages/user/profile?userId=${userId}`
		});
	};

	// 获取API基础URL
	const getApiBaseUrl = () => {
		// 开发环境
		if (process.env.NODE_ENV === 'development') {
			return 'http://172.20.10.2:8080/api';
		}
		// 生产环境
		return 'https://api.campuslostfound.com';
	};

	// 封装Promise化的request方法
	const request = (options : UniApp.RequestOptions) => {
		return new Promise<UniApp.RequestSuccessCallbackResult>((resolve, reject) => {
			uni.request({
				...options,
				success: resolve,
				fail: reject
			});
		});
	};

	// 获取物品详情
	const fetchItemDetail = async () => {
		try {
			isLoading.value = true;
			errorMessage.value = '';

			const res = await request({
				url: `${getApiBaseUrl()}/FoundItem/${itemId.value}`,
				method: 'GET',
				header: {
					'Content-Type': 'application/json'
				}
			});

			if (res.data.code !== 200) {
				throw new Error(res.data.message || '获取物品详情失败');
			}

			const data = res.data.data;
			// 更新物品信息
			itemInfo.title = data.title || '';
			itemInfo.status = data.status || 2;
			itemInfo.createTime = formatDate(data.createTime) || '';
			itemInfo.foundTime = formatDate(data.foundTime) || '';
			itemInfo.foundLocation = data.foundLocation || '';
			itemInfo.description = data.description || '';
			itemInfo.userId = data.userId || ''; // 发布者ID
			itemInfo.contactWay = data.contactWay || '';

			// 更新图片列表
			itemImages.value = data.images || [];

			// 获取发布者信息
			await fetchPublisherInfo(data.userId);

			// 获取评论列表
			await fetchComments();

		} catch (error : any) {
			errorMessage.value = error.message || '网络错误，请稍后再试';
			console.error('获取物品详情失败', error);
		} finally {
			isLoading.value = false;
		}
	};
	// 获取物品发布者信息
	const fetchPublisherInfo = async (userId : string) => {
		try {
			// 检查缓存
			if (userCache.value.has(userId)) {
				const cachedUser = userCache.value.get(userId);
				publisherInfo.avatar = cachedUser.avatar;
				publisherInfo.name = cachedUser.name;
				publisherInfo.academy = cachedUser.academy;
				return cachedUser;
			}

			const res = await request({
				url: `${getApiBaseUrl()}/user/get/${userId}`,
				method: 'GET',
				header: {
					'Content-Type': 'application/json'
				}
			});

			if (res.data.code !== 200) {
				throw new Error(res.data.message || '获取用户信息失败');
			}

			const userData = res.data.data;
			const userInfoData = {
				avatar: userData.avatar || defaultAvatar,
				name: userData.name || '未知用户',
				academy: userData.academy || '未公开学院'
			};

			// 缓存用户信息并更新发布者信息
			userCache.value.set(userId, userInfoData);
			publisherInfo.avatar = userInfoData.avatar;
			publisherInfo.name = userInfoData.name;
			publisherInfo.academy = userInfoData.academy;

			return userInfoData;
		} catch (error : any) {
			console.error('获取发布者信息失败', error);
			// 设置默认用户信息
			const defaultUser = {
				avatar: defaultAvatar,
				name: '未知用户',
				academy: '未公开学院'
			};
			publisherInfo.avatar = defaultUser.avatar;
			publisherInfo.name = defaultUser.name;
			publisherInfo.academy = defaultUser.academy;
			return defaultUser;
		}
	};

	// 获取评论列表
	const fetchComments = async () => {
		try {
			const res = await request({
				url: `${getApiBaseUrl()}/FoundItem/getComments/${itemId.value}`,
				method: 'GET',
				header: {
					'Content-Type': 'application/json'
				}
			});

			if (res.data.code !== 200) {
				throw new Error(res.data.message || '获取评论列表失败');
			}

			const commentList = res.data.data || [];

			// 优化：为每个评论异步获取用户信息（使用Promise.all）
			const commentPromises = commentList.map(async (comment) => {
				const userInfo = await fetchCommenterInfo(comment.userId);
				return {
					...comment,
					commenterName: userInfo.name,
					commenterAvatar: userInfo.avatar,
					commenterAcademy: userInfo.academy,
					time: formatDate(comment.commentTime || comment.createTime)
				};
			});

			// 前端根据评论数组长度计算评论数量
			// 等待所有用户信息获取完成
			comments.value = await Promise.all(commentPromises);
			itemInfo.commentCount = comments.value.length;

		} catch (error : any) {
			console.error('获取评论列表失败', error);
			comments.value = [];
			itemInfo.commentCount = 0;
		}
	};

	// 获取评论发布者信息（通用函数）
	const fetchCommenterInfo = async (userId : string) : Promise<UserInfo> => {
		try {
			// 检查缓存
			if (userCache.value.has(userId)) {
				return userCache.value.get(userId)!;
			}

			const res = await request({
				url: `${getApiBaseUrl()}/user/get/${userId}`,
				method: 'GET',
				header: {
					'Content-Type': 'application/json'
				}
			});

			if (res.data.code !== 200) {
				throw new Error(res.data.message || '获取用户信息失败');
			}

			const userData = res.data.data;
			const userInfoData = {
				avatar: userData.avatar || defaultAvatar,
				name: userData.name || '未知用户',
				academy: userData.academy || '未公开学院'
			};

			// 缓存用户信息
			userCache.value.set(userId, userInfoData);
			return userInfoData;
		} catch (error : any) {
			console.error('获取评论用户信息失败', error);
			return {
				avatar: defaultAvatar,
				name: '匿名用户',
				academy: ''
			};
		}
	};

	// 获取评论发布者信息并更新评论
	const fetchCommenterInfoAndUpdateComment = async (comment : CommentItem) => {
		try {
			const userInfoData = await fetchCommenterInfo(comment.userId);

			// 更新评论中的用户信息
			const index = comments.value.findIndex(c => c.id === comment.id);
			if (index !== -1) {
				comments.value[index] = {
					...comments.value[index],
					commenterName: userInfoData.name,
					commenterAvatar: userInfoData.avatar,
					commenterAcademy: userInfoData.academy
				};
			}
		} catch (error) {
			console.error('获取评论用户信息失败', error);
		}
	};

	//获取浏览次数
	// 记录浏览次数
	const recordViewCount = async (itemId: string) => {
	  try {    
	    // 调用后端API记录浏览
	    const res = await request({
	      url: `${getApiBaseUrl()}/Views/FoundItemGet/${itemId}`,
	      method: 'GET'
	    });
		console.log(res)
	      itemInfo.viewCount = res.data.data.number;
		  console.log(itemInfo.viewCount)
	  } catch (error) {
	    console.error('浏览统计失败', error);
	  }
	};
	onMounted(() => {
	  console.log('【1】onMounted 钩子触发');
	  
	  const pages = getCurrentPages();
	  const currentPage = pages[pages.length - 1];
	  const options = currentPage.options;
	  
	  itemId.value = options.id || '';
	  console.log('【2】获取到的 itemId:', itemId.value);
	  
	  if (!itemId.value) {
	    console.log('【3】itemId 为空，终止执行');
	    errorMessage.value = '缺少物品ID参数';
	    isLoading.value = false;
	    return;
	  }
	  

	  recordViewCount(itemId.value); // 检查此行是否被执行
	  
	
	  fetchItemDetail();
	});

	// 组件卸载时清理资源
	onUnmounted(() => {
		// 可以在这里取消未完成的请求
	});

	// 类型定义
	interface UserInfo {
		avatar : string;
		name : string;
		academy : string;
	}

	interface CommentItem {
		id : string | number;
		userId : string;
		content : string;
		commentTime ?: string;
		// 新增评论发布者信息字段
		commenterName ?: string;
		commenterAvatar ?: string;
		commenterAcademy ?: string;
		time ?: string;
	}
</script>

<style>
	/* 保持原有样式不变，以下是可能需要的调整 */
	page {
		height: 100%;
		background-color: #E6F3FF;
	}

	.page-container {
		display: flex;
		flex-direction: column;
		padding-bottom: 120rpx;
	}

	.content-wrapper {
		flex: 1;
	}

	/* 加载状态样式 */
	.loading-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100vh;
		background-color: #f5f5f5;
	}

	.loading-spinner {
		width: 40px;
		height: 40px;
		border: 4px solid rgba(74, 144, 226, 0.1);
		border-left-color: #4A90E2;
		border-radius: 50%;
		animation: spin 1s linear infinite;
		margin-bottom: 16rpx;
	}

	@keyframes spin {
		to {
			transform: rotate(360deg);
		}
	}

	.error-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100vh;
		background-color: #f5f5f5;
		padding: 40rpx;
		text-align: center;
	}

	.error-text {
		font-size: 16px;
		color: #ff5500;
		margin-bottom: 30rpx;
	}

	.reload-button {
		background-color: #4A90E2;
		color: white;
		padding: 16rpx 40rpx;
		border-radius: 8rpx;
		font-size: 14px;
	}

	.swiper-container {
		width: 100%;
		height: 422rpx;
	}

	.swiper {
		width: 100%;
		height: 100%;
	}

	.swiper-image {
		width: 100%;
		height: 100%;
	}

	.info-container {
		background-color: #FFFFFF;
		padding: 30rpx;
		margin: 20rpx;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.title-row {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.item-title {
		font-size: 18px;
		font-weight: bold;
		color: #333;
		flex: 1;
	}

	.status-tag {
		padding: 6rpx 16rpx;
		background-color: #FF6B6B;
		border-radius: 8px;
	}

	.status-tag.claimed {
		background-color: #4CAF50;
	}

	.status-tag text {
		font-size: 12px;
		color: #FFFFFF;
	}

	.meta-row {
		display: flex;
		margin-bottom: 16rpx;
	}

	.meta-item {
		display: flex;
		align-items: center;
		margin-right: 30rpx;
	}

	.meta-text {
		font-size: 14px;
		color: #666;
		margin-left: 8rpx;
	}

	.tag-container {
		display: flex;
		flex-wrap: wrap;
		margin-top: 20rpx;
	}

	.tag {
		padding: 6rpx 16rpx;
		background-color: #E6F3FF;
		border-radius: 8px;
		margin-right: 10rpx;
		margin-bottom: 10rpx;
	}

	.tag text {
		font-size: 12px;
		color: #4A90E2;
	}

	.description-container {
		background-color: #FFFFFF;
		padding: 30rpx;
		margin: 20rpx;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.section-title {
		font-size: 16px;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
		display: block;
	}

	.description-content {
		font-size: 14px;
		color: #666;
		line-height: 1.5;
	}

	.user-container {
		background-color: #FFFFFF;
		padding: 30rpx;
		margin: 20rpx;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.user-info {
		display: flex;
		align-items: center;
		cursor: pointer;
		/* 添加点击效果 */
	}

	.avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.user-details {
		display: flex;
		flex-direction: column;
	}

	.username {
		font-size: 16px;
		color: #333;
		font-weight: 500;
	}

	.user-academy {
		font-size: 14px;
		color: #666;
		margin-top: 4rpx;
	}

	.interaction-container {
		display: flex;
		justify-content: space-around;
		background-color: #FFFFFF;
		padding: 20rpx 0;
		margin: 20rpx;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.interaction-item {
		display: flex;
		align-items: center;
	}

	.interaction-text {
		font-size: 14px;
		color: #666;
		margin-left: 8rpx;
	}

	/* 评论区样式 */
	.comments-container {
		background-color: #FFFFFF;
		padding: 30rpx;
		margin: 20rpx;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.comments-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.comment-form {
		display: flex;
		width: 100%;
		margin-top: 10rpx;
	}

	.comment-input {
		flex: 1;
		height: 80rpx;
		background-color: #F5F5F5;
		border-radius: 8rpx;
		padding: 0 20rpx;
		font-size: 14px;
	}

	.comment-submit {
		margin-left: 10rpx;
		padding: 0 20rpx;
		line-height: 80rpx;
		height: 80rpx;
		background-color: #4A90E2;
		color: #FFFFFF;
		border: none;
		border-radius: 8rpx;
		font-size: 14px;
	}

	.comment-list {
		margin-top: 20rpx;
	}

	.comment-item {
		padding-bottom: 20rpx;
		margin-bottom: 20rpx;
		border-bottom: 1rpx solid #F0F0F0;
	}

	.comment-user {
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.comment-avatar {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		margin-right: 15rpx;
	}

	.comment-user-info {
		display: flex;
		flex-direction: column;
	}

	.comment-name {
		font-size: 14px;
		color: #333;
		font-weight: 500;
	}

	.comment-academy {
		font-size: 12px;
		color: #666;
		margin-top: 2rpx;
	}

	.comment-content {
		font-size: 14px;
		color: #666;
		line-height: 1.6;
		background-color: #F9F9F9;
		padding: 15rpx;
		border-radius: 8rpx;
		margin-bottom: 10rpx;
	}

	.comment-time {
		font-size: 12px;
		color: #999;
	}

	.safety-tip {
		padding: 30rpx;
		margin: 20rpx;
		background-color: #FFFFFF;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.safety-tip text {
		font-size: 12px;
		color: #999;
	}

	.action-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #FFFFFF;
		padding: 20rpx;
		box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.05);
		z-index: 100;
	}

	.action-buttons {
		display: flex;
		align-items: center;
	}

	.secondary-button {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 120rpx;
		height: 80rpx;
		border: 1px solid #4A90E2;
		border-radius: 8px;
		margin-right: 20rpx;
	}

	.secondary-button text {
		font-size: 12px;
		color: #4A90E2;
		margin-top: 4rpx;
	}

	.primary-button {
		flex: 1;
		height: 80rpx;
		background-color: #4A90E2;
		border-radius: 8px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.primary-button text {
		font-size: 16px;
		color: #FFFFFF;
		font-weight: bold;
	}

	/* 新增发布者标签样式 */
	.user-identity {
		display: flex;
		align-items: center;
		margin-top: 4rpx;
	}

	.publisher-tag {
		margin-left: 10rpx;
		padding: 2rpx 8rpx;
		background-color: #4A90E2;
		color: white;
		border-radius: 4rpx;
		font-size: 12rpx;
	}
</style>